<template>
	<view class="pl-2 pr-2">
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="产品详情"></u-navbar> -->
		<u-form>
			<u-form-item :border-bottom="false" label-width="180" label="上游企业名称" :disabled="true" input-align="right"
				:field-style="placeholderStyle">
				<u-input v-model="newlist.enterpriseName" input-align="right" />
			</u-form-item>
			<u-form-item :border-bottom="false" label="订单/服务名称" label-width="220" :disabled="true" input-align="right"
				:field-style="placeholderStyle">
				<u-input v-model="newlist.productServeName" input-align="right" />
			</u-form-item>

			<u-form-item :border-bottom="false" label="服务商名称" label-width="180" :disabled="true" input-align="right"
				:field-style="placeholderStyle">
				<u-input v-model="newlist.serviceName" input-align="right" />
			</u-form-item>

			<u-form-item :border-bottom="false" :disabled="true" label="服务介绍" label-width="140" input-align="right"
				:field-style="placeholderStyle">
				<u-input type="textarea" v-model="newlist.serviceIntroduction" input-align="right" />
			</u-form-item>
			<u-form-item :border-bottom="false" label-width="230" label="服务介绍详情" >
				<view style=" display: flex; flex-wrap: wrap;">
					<u-image v-for="(img, index) in images" :key="index" :src="getFullImageUrl(img)"
						style="width: 90px; height: 90px; margin: 5px;" @click="previewImage(index)" mode=""></u-image>
				</view>
			</u-form-item>
			<u-form-item :border-bottom="false" :disabled="true" label-width="180" label="服务价格(元)" input-align="right">
				<u-input v-model="newlist.servicePrice" input-align="right" />
			</u-form-item>
			<!-- <view style="position: absolute; right: 0; top:13px" class="pr-4 font-14 text-999999">元</view> -->
			<!-- 	<u-form-item  v-model="newlist.serviceFlow" :border-bottom="false" :disabled="true" label="服务流程" input-align="right"
			:field-style="placeholderStyle"></u-form-item >
		<u-form-item  v-model="newlist.serviceInform" :border-bottom="false" :disabled="true" label="服务售后" -->
			<!-- input-align="right" :field-style="placeholderStyle"></u-form-item > -->
			<view class="flex-center fixed-bottoms">
				<view class="bg-FFC251 rounded-circle py-2 pl-5 pr-5 text-white font-14"
					@click="makePhoneCall(newlist.phone)">电话咨询</view>
				<view class="bg-78AB06 rounded-circle py-2 pl-5 pr-5 text-white font-14"
					@click="addProductServe(newlist.id)">使用服务</view>
			</view>
		</u-form>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	export default {
		data() {
			return {

				newlist: {},
				placeholderStyle: {
					color: '#999'
				},
				placeholderStyles: {
					color: '#999',
					right: '15px'
				},
				images: [],
			}
		},
		computed: {

		},
		onLoad(options) {
			const id = options.id;
			this.NewListDetail(id)
		},
		methods: {
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			previewImage(index) {
				uni.previewImage({
					urls: this.images.map(img => this.getFullImageUrl(img)), 
					current: this.getFullImageUrl(this.images[index]) 
				});
			},
			NewListDetail(id) {
				$H.get('/upper/upperMarketProduct/queryById', {
					id: id
				}, {}).then(res => {
					this.newlist = res.result
					this.phone = res.result.phone
					if (res.result.serviceIntroductionUrl) {
						this.images = res.result.serviceIntroductionUrl.split(',');
					} else {
						this.images = [];
					}
					
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},
			makePhoneCall(phone) {
				uni.showModal({
					title: '拨打电话',
					content: '确定要拨打电话吗？',
					success: (res) => {
						if (res.confirm) {
							this.doMakePhoneCall(phone);
						}
					}
				});
			},
			doMakePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			addProductServe(id) {
				uni.showModal({
					title: '使用服务',
					content: '是否确认发起上游产品/订单服务？',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了确认按钮，执行请求操作
							$H.post('/upper/upperMarketOrder/agriculture/addProductServe', {
									upperMarketProductId: id
								}, {
									header: {
										'Content-Type': 'application/x-www-form-urlencoded'
									}
								})
								.then(res => {
									// 请求成功处理逻辑
									uni.showToast({
										title: res.message,
										icon: 'success',
										duration:3000
									});
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/tabbar/order/index'
										});
									}, 3000);
								})
								.catch(error => {
									// 请求失败处理逻辑
									uni.showToast({
										title: '网络错误，请稍后再试',
										icon: 'none'
									});
								});
						} else if (res.cancel) {
							// 用户点击了取消按钮，不执行任何操作
						}
					}
				});
			},

		}
	}
</script>

<style>
</style>